<template>
  <el-dialog :visible.sync="visible" v-dialogDrag :title="title" :close-on-click-modal="false" class="tl-dialog" :append-to-body="true" width="1200px" @open="open" @close="close">
    <el-form class="tl-form" ref="form" :model="model" :rules="rules" label-width="150px" :disabled="disableEditSubmit">
			<el-row>
				<el-col :span="12">
					<el-form-item label="一级目录" prop="code" :rules="rules.validateRequire" >
            <el-select @change="selectChanged(model.code)" v-model="model.code" filterable clearable>
							<el-option v-for="item in codeModel.firstDirectoryList" :key="item.code" :label="item.name" :value="item.code" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="修改位置" prop="index" :rules="rules.validateIntGteZero1.concat(rules.validateRequire)">
						<!-- <el-input v-model="model.index" type="number" min="1" max="maxFirst" @input="numberChange(arguments[0], maxFirst)"></el-input> -->
            <el-input-number v-model="model.index" :step="1" :min="1" :max="maxFirst" :controls="false"  style="width:100%"  step-strictly></el-input-number>
					</el-form-item>
				</el-col>
			</el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="doCancelEdit">取消</el-button>
      <el-button type="primary" @click="doUpdate" :loading="updateLoading">更新</el-button>
    </div>
  </el-dialog>
</template>

<script>
/** mixins */
import { mixin_edit } from '@tapui/mixins/mixin_edit'
/** 子组件 */
/** 工具类 */
import { validateIntGteZero1 } from '@/utils/validateRule'
import { putAction, getAction, postAction, deleteAction } from '@tapui/utils/http'
/** VUE配置 */
export default {
  mixins: [mixin_edit],
  components: { },
  data() {
    return {
      moduleTitle: '修改领域位置',
      urlPrefix: '/appv2/appAreaInitializationConfig/',
      url: {
        // 额外的url
        doUpdate: '/appv2/appAreaInitializationConfig/updateFirstDirectory'
      },
       addRules: {
        validateIntGteZero1: [
          // 正整形校验
          { validator: validateIntGteZero1 }
        ]
      },
      maxFirst: 12,
      updateLoading: false
    }
  },
   props: {
    selectedList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  methods: {
     loaded() {
      // 页面加载完毕执行
        this.$set(this.model, 'index', undefined)
    },
    // 切换赋值name
    selectChanged(code) {
      if (code !== '') {
      for (var item in this.codeModel.firstDirectoryList) {
         if (this.codeModel.firstDirectoryList[item].code === code) {
            this.model.name = this.codeModel.firstDirectoryList[item].name
         }
      }
     }
    },
    doUpdate() {
      this.$nextTick(() => {
        // 表单校验
      this.$refs.form.validate((valid) => {
      if (valid) {
        this.$tap.confirm('是否确认更新？').then((_) => {
              this.updateLoading = true
              getAction(this.url.doUpdate, this.model).then((res) => {
              if (res.success) {
                this.$message({
                  message: '更新成功！',
                  type: 'success'
                  })
                this.visible = false
                this.updateLoading = false
                this.$emit('refresh')
                  } else {
                this.$tap.alert(res.message, 'warning')
                }
              }).catch((err) => {})
           })
          } else {
            return false
          }
        })
     })
    },
    numberChange(val, maxNum) {
           // 转换数字类型
          this.model.index = Number(val)
          // 重新渲染
          this.$nextTick(() => {
              // 比较输入的值和最大值，返回小的
              let num = Math.min(Number(val), maxNum)
              // 输入负值的情况下， = 0（可根据实际需求更改）
              if (num <= 0) {
                  this.model.index = 0
              } else {
                  // 反之
                  this.model.index = num
              }
          })
      },
     open() {
      this.visible = true
      this.title = this.moduleTitle
      this.maxFirst = this.codeModel.firstDirectoryList.length
      // 清空默认值
      this.$set(this.model, 'code', '')
      // this.$set(this.model, 'index', '')
      this.$set(this.model, 'index', undefined)
      // 清除表单校验
      this.$nextTick(() => {
            this.$refs.form.clearValidate()
          })
     },
     cancel() {
      this.visible = false
    }
  }
}
</script>

